<template>
	<el-main>
		<el-card shadow="never" v-loading="isLoading">
			<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="form"
					 label-width="110px"
					 label-position="left">
				<el-main>
					<el-row>
						<el-col :span="11">
							<el-form-item label="服务卡名称" prop="card_name">
								<el-input v-model="form.card_name" placeholder="请输入服务卡名称，最多20个字符" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="11">
							<el-form-item label="服务卡面" prop="card_pic">
								<sc-upload ref="upload" v-model="form.card_pic"
										   :completeUrl="form.card_pic_url" :limit="1"
										   title="服务卡面">
								</sc-upload>
								<div class="el-upload__tip text-red">
									大小1m以内，支持png、jpg、jpeg格式，尺寸建议 670*376
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="11">
							<el-form-item label="选择商品" prop="card_product">
								<el-button @click="addProduct" style="margin-bottom: 10px;">添加商品</el-button>
							</el-form-item>
						</el-col>
					</el-row>
					<sc-form-table :span="20" ref="table" v-model="form.card_product" :hideAdd="true" @rowDelSuccess="rowDelSuccess" drag-sort placeholder="暂无数据">
						<el-table-column label="序号" type="index" width="180"></el-table-column>
						<el-table-column label="商品ID" prop="product_id" width="100"></el-table-column>
						<el-table-column label="商品名称" prop="product_name" width="150"></el-table-column>
						<el-table-column label="销售价" prop="sale_price" width="150"></el-table-column>
						<el-table-column label="库存" prop="stock_qty" width="150"></el-table-column>
						<el-table-column label="有效期" prop="valid_date_text" width="140"></el-table-column>
						<el-table-column label="服务商名称" prop="provider_name" width="150"></el-table-column>
					</sc-form-table>
					<el-row>
						<el-text class="mx-1">{{ text_desc }}</el-text>
					</el-row>
					<el-row>
						<el-col :span="11">
							<el-form-item label="备注" prop="remark">
								<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入备注，限制500个字符" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-main>
				<el-row>
					<el-col :span="2">
						<el-form-item>
							<el-button type="primary" :loading="isSaveing" @click="submit()">保存</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
	</el-main>
	<popup-dialog v-if="popupDialog" ref="popupDialog"
				  @success="handleSuccess" @closed="popupDialog = false"></popup-dialog>
</template>
<script>
import popupDialog from './productdialog.vue'

export default {
	name: 'service_card_create',
	components: {popupDialog},
	data() {
		return {
			isSaveing: false,
			popupDialog: false,
			form: {
				card_name: "",
				card_pic: "",
				card_pic_url: "",
				card_product: [],
			},
			text_desc: "",
			//验证规则
			rules: {
				card_name: [
					{required: true, message: '请输入服务卡名称'}
				],
				card_pic: [
					{required: true, message: '请上传服务卡面'}
				],
				card_product: [
					{required: true, message: '请选择商品'}
				],
			},
		}
	},
	watch: {
		// 监听message数据的变化
		card_product(newValue, oldValue) {
			console.log(`消息从 "${oldValue}" 变化到 "${newValue}"`);
			// 在这里可以执行需要的操作
		}
	},
	mounted() {
	},
	methods: {
		submit() {
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					this.$API['service_card.service_card'].store.post(this.form)
						.then((res) => {
							if (res.code == 0) {
								this.$emit('success', this.form, this.mode)
								this.$refs.form.resetFields()
								this.$refs.upload.clearFiles()
								this.$message.success("操作成功")
								this.$router.push({
									path: '/service_card/index',
									query: {},
									key: "service_card_index"
								})
							} else {
								this.$alert(res.message, "提示", {type: 'error'})
							}
						})
						.catch((msg) => {
							this.$alert(msg, "提示", {type: 'error'})
						})
						.finally(() => {
							this.isSaveing = false;
						});
				} else {
					return false;
				}
			})
		},
		//添加嘉宾
		addProduct() {
			this.popupDialog = true
			this.$nextTick(() => {
				this.$refs.popupDialog.open();
			})
		},

		handleSuccess(selection) {
			this.$refs.popupDialog.close()
			if (selection.length <= 0) {
				this.$alert('请选择商品', '提示', {type: 'error'});
			} else {
				this.form.card_product = selection
				this.calculate_product_price();
			}
		},
		rowDelSuccess(tabData) {
			console.log('删除', '++++++', tabData)
			this.calculate_product_price();
		},

		calculate_product_price() {
			var total_price = 0;
			this.form.card_product.forEach(function (item) {
				total_price += parseFloat(item.sale_price)
				console.log(item.product_id, '------------');
			});
			if (total_price <= 0) {
				this.text_desc = "";
			} else {
				this.text_desc = '总价：' + total_price.toFixed(2);
			}
		}
	}
}
</script>

<style>
</style>
